<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
<style media="screen">
    body {
        background: black;
        text-align: center;

    }

    #canvas {
        background-color: white;
    }
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
    window.onload = function () {
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext("2d");

            canvas.height = 600;
            canvas.width = 800;
            drawRoundRect(context,400,300,300,200,6);

}
function drawRoundRect(ctx,x,y,width,height,radius) {
    ctx.save();
    ctx.translate(x,y);
    pathRoundRect(ctx,width,height,radius);
    ctx.strokeStyle = "black";
    ctx.lineWidth = 3;
    ctx.stroke();
    ctx.restore();
  }
  function pathRoundRect(ctx,width,height,radius) {
      ctx.beginPath();
      ctx.arc(width-radius,height-radius ,radius,0,Math.PI/2);
      ctx.lineTo(radius,height);
      ctx.arc(radius,height-radius ,radius, Math.PI/2,Math.PI);
      ctx.lineTo(0,radius);
      ctx.arc(radius,radius,radius,Math.PI,Math.PI*3/2);
      ctx.lineTo(width-radius,0);
      ctx.arc(width-radius,radius,radius,Math.PI*3/2,Math.PI*2);
      ctx.closePath();
    }
</script>
</body>
</html>